import { Image } from "expo-image";
import { View, Text, StyleSheet } from "react-native";

type CourseProps = {
  image: string;
  name: string;
  chaptersCount?: number;
  likesCount?: number;
};

const Course = (props: CourseProps) => {
  const { image, name, chaptersCount, likesCount } = props;

  return (
    <View style={styles.wrap}>
      <Image style={styles.image} source={{ uri: image }} />
      <View style={styles.titleWrapper}>
        <Text style={styles.title}>{name}</Text>
        <View>
          {chaptersCount && (
            <Text style={styles.chapterCount}>全{chaptersCount}节</Text>
          )}
          {likesCount && (
            <Text style={styles.chapterCount}>{likesCount}人收藏</Text>
          )}
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  wrap: {
    marginVertical: 10,
    marginHorizontal: 4,
    width: 250,
  },
  image: {
    width: "100%",
    height: 150,
    borderRadius: 10,
  },
  title: {
    height: 20,
    overflow: "hidden",
    marginTop: 6,
  },
  titleWrapper: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  chapterCount: {
    width: "auto",
    borderRadius: 3,
    fontSize: 10,
    padding: 3,
    color: "#8A63D2",
    backgroundColor: "#B786FA22",
  },
});

export default Course;
